<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>


        /*body 写了font-size所有后代都是font-size,所以最好在body里写font-size */
        body {
            font-size: 20px;
            /*font-family 表示字体族,建议微软雅黑,serif(衬线字体),sans-serif(非衬线字体)*/
            font-family: "微软雅黑", sans-serif;

        }

        .te1 {
            /*font-style  表示字体样式(字体倾斜还是不倾斜),normal默认，italic(倾斜)*/
            font-style: italic;
        }

        /*样式交给css，语义交给html,所以em这种是强调，不要拿去当样式 */
        .te2 {
            /*oblique和italic实际差不多的,italic是找到字体设计者的倾斜,而oblique更强硬，是强制倾斜 */
            /*实际开发中推荐使用italic，italic即使没有设置倾斜，才会再强制倾斜 */
            font-style: oblique;
        }

        .te3 {
            /*从细到粗 lighter,normal,bold,bolder  ,默认微软雅黑只有前3种，第四种和第三种一样*/
            font-weight: bolder;
        }

        .te4 {
            /*也可以写数值 [100,1000],但并不是每个值都不一样，实际情况看字体，微软雅黑100和300一样*/
            font-weight: 1000;
        }

        .te5 {
            /*复合属性,字体大小和字体族必须要写 ,且字体族放最后，大小导数第二，剩下的往前加*/
            /*不同属性用空格隔开,多个字体族用逗号隔开,字体会优先从左开始*/
            font: bolder italic 100px "华文彩云", "华文琥珀", Serif;
            /*color表示字体颜色*/
            color: rgb(255, 0, 0, 0.5);
        }

        .te7 {
            font-size: 30px;
        }

        .te8 {
            font-size: 30px;
            /*字体间距,每个字母左右间距*/
            letter-spacing: 5px;
        }
        .te9 {
            font-size: 30px;
            /* 单词间距，每个单词之间的间距,是根据空格去识别是不是一个单词,所以对中文不起作用 */
            word-spacing: 5px;
        }
        .te10 {
            /*text-decoration 文本修饰，上划线(overline)，下划线(underline)，删除线(line-through)就是文本修饰 dotted虚线 wavy波浪线，颜色*/
            text-decoration: underline wavy red;
            font-size: 40px;
            /*text-indent 首行缩进，文字大小40px,缩进80px就是两个文字*/
            text-indent: 80px;
        }
        a {
            /*去掉超链接下面的线,同理可以去掉ins,del等下划线和删除线 */
            text-decoration: none;
        }
        .te11 {
            background-color: yellow;
            /*文字并不都是垂直居中，会靠下一点，最终可能比40px大也可能比40px小*/
            font-size: 40px;
            /*文本水平对齐  left (默认),center中间,right(右对齐)*/
            text-align: left;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">去百度</a>
<div class="te1">11111111</div>
<div class="te2">22222222</div>
<div class="te3">33333333</div>
<div class="te4">44444444</div>
<div class="te5">55555555</div>
<div class="te6">You make a good job, 很好,你做的好，you an variable in the world,the world will change because of you</div>
<div class="te7">You make a good job, 很好,你做的好，you an variable in the world,the world will change because of you</div>
<div class="te8">You make a good job, 很好,你做的好，you an variable in the world,the world will change because of you</div>
<div class="te9">You make a good job, 很好,你做的好，you an variable in the world,the world will change because of you</div>
<div class="te10">You make a good job, 很好,你做的好，you an variable in the world,the world will change because of you</div>
<div class="te11">aiti ant 很好,你做的好</div>
</body>
</html>